<template>
  <div class="table-container">
    <div class="table-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>装修贷</el-breadcrumb-item>
        <el-breadcrumb-item>贷款列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="table-search">
      <el-row>
        <el-input
          style="width: 200px;margin-right: 10px"
          placeholder="请输入报价信息查询"
          v-model="keyword"
          clearable
          @clear="resetData"
        >
        </el-input>
        <el-button type="primary" @click="resetData" >搜索</el-button>
			<el-button
			  type="primary"
			  style="margin-left: 20px"
			  size="medium"
			  @click="outFile"
			  >导出</el-button
			>
      </el-row>
    </div>
    <div class="table-content">
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="申请中" name="1"></el-tab-pane>
        <el-tab-pane label="申请通过" name="2"></el-tab-pane>
        <el-tab-pane label="申请不通过" name="0"></el-tab-pane>
    </el-tabs> -->
      <el-table
        border
        empty-text="当前数据空空如也"
        ref="multipleTable"
        :data="offerList"
        tooltip-effect="dark"
        style="width: 100%"
        @select="selectedRow"
        @select-all="selectedAll"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="60"></el-table-column>
        <el-table-column prop="order_no" label="订单号" width="auto"></el-table-column>
        <el-table-column prop="order_type" label="订单类型" width="auto" :formatter="changeType"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="auto"></el-table-column>
        <el-table-column prop="id_no" label="身份证号" width="auto"></el-table-column>
        <el-table-column prop="loan_amount" label="贷款金额" width="auto"></el-table-column>
        <el-table-column prop="status" label="状态" width="100" :formatter="changeStatus"></el-table-column>
        <el-table-column prop="repay_term" label="还款期限（月）" width="120"></el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="auto" :formatter="changeTime"></el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              style="margin-right: 5px"
              @click="toDetail(scope.row.id)">详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-nav">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 50,100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
	<!-- 导出弹出 -->
	<el-dialog title="导出" :visible.sync="dialogExpord">
	  <el-form >
	    <el-form-item label="导出位置" label-width="120px">
	      <el-input v-model="start_no" placeholder="从第几条开始导出" ></el-input>
	    </el-form-item>
	   <el-form-item label="数量" label-width="120px">
	     <el-input v-model="end_no" placeholder="导出数量,一次最多2000条"></el-input>
	   </el-form-item>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="dialogExpord = false">取 消</el-button>
	    <el-button type="primary" @click="outFile">确 定</el-button>
	  </div>
	</el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        page: 1,
        pageSize: 10,
        total: 0,
        keyword: '',
        offerList: [],
        multipleSelection: [],
        activeName:'1',
		start_no:'',//第几条开始导出
		end_no:'',//导出数量
		dialogExpord:false,
      }
    },
    mounted() {
      this.queryList();
    },
    methods: {
        changeTime(row, column, cellValue, index){
            if(cellValue){
                return this.$moment(cellValue*1000).format('yyyy-MM-DD HH:ss')
            }
        },
        // 订单类型
        changeType(row, column, cellValue, index){
             if(cellValue==1){
                return '普通商品'
            }else if(cellValue==2){
                return '产品包'
            }else if(cellValue==3){
                return '设计师'
            }else if(cellValue==4){
                return '施工队'
            }else{
                return ''
            }
        },
                // 导出
			outFile() {
				this.dialogExpord=false;
			  var a = document.createElement("a");
			  // a.setAttribute(
			  //   "href",
			  //   `/api/root/LoanApply/applyExport?keyword=${this.keyword}&start_no=${this.start_no}&end_no=${this.end_no}`
			  // );
			  a.setAttribute(
			    "href",
			    `/api/root/LoanApply/applyExport?keyword=${this.keyword}`
			  );
			  a.setAttribute("target", "_blank");
			  a.setAttribute("id", "startTelMedicine");
			  // 防止反复添加
			  if (document.getElementById("startTelMedicine")) {
			    document.body.removeChild(document.getElementById("startTelMedicine"));
			  }
			  document.body.appendChild(a);
			  a.click();
			},
        // 申请状态
        changeStatus(row, column, cellValue, index){
            if(cellValue==0){
                return '申请中'
            }else if(cellValue==1){
                return '申请通过'
            }else if(cellValue==2){
                return '申请不通过'
            }
        },

        selectedRow(selection, row) {
            this.multipleSelection = [];
            const _ths = this;
            selection.map(function (item) {
                _ths.multipleSelection.push(item.id);
            })
        },
        selectedAll(rows) {
            if (rows.length === 0) {
                this.multipleSelection = [];
            } else {
                const _ths = this;
                rows.map(function (item) {
                    if (!_ths.multipleSelection.includes(item.id)) {
                    _ths.multipleSelection.push(item.id);
                    }
                })
            }
        },

        // 详情
        toDetail(id){
            this.$router.push({name:'decLoanDetail',query:{id}})
        },


        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.queryList()
        },
        handleCurrentChange(val) {
            this.page = val;
            this.queryList();
        },

        // 切换tab
        handleClick(){
            this.queryList()
        },
        queryList() {
            this.$http.get('/api/root/LoanApply/index', {
                page: this.page,
                pagesize: this.pageSize,
                keyword: this.keyword
            }).then(res => {
                if (res.code == 1) {
                    this.offerList = res.data.list?res.data.list:[];
                    this.total = res.data.total;
                }
            })
        },
        resetData(){
            this.page = 1;
            this.queryList();
        }
    }
  }
</script>
<style lang="less" scoped>
  @import 'list.less';
</style>
